<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>熙心体检系统登录</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
	 
    body {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      font-family: "微软雅黑", "PingFang SC", "Helvetica Neue", sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
    }
    
    /* 登录表单容器
     * - 采用响应式设计，在小屏设备上自适应宽度，大屏设备上限制最大宽度
     * - 使用圆角和阴影创建现代卡片式UI，增强视觉层次感
     * - 通过精心设计的内边距确保内容布局合理，提升用户体验
     */
    .login-box {
      /* 响应式布局：确保在移动设备上填满屏幕宽度，在桌面设备上保持适当尺寸 */
      width: 100%;
      max-width: 420px;
      /* 视觉设计：移除默认边框，添加12px圆角创造柔和现代的外观 */
      border: none;
      border-radius: 12px;
      /* 空间管理：提供足够的内边距确保内容不拥挤，同时优化移动端触控区域 */
      padding: 40px 35px;
      /* 视觉层次：白色背景增强可读性，双层阴影创造悬浮效果并强化界面深度 */
      background: white;
      box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.05), /* 远距离柔和阴影，模拟悬浮感 */
        0 2px 6px rgba(0, 0, 0, 0.08);  /* 近距离清晰阴影，强化边缘轮廓 */
    }
    
    .login-box h2 {
      font-size: 26px;
      font-weight: 600;
      color: #333;
      margin-bottom: 30px;
      text-align: center;
      position: relative;
      padding-bottom: 12px;
    }
    
    .login-box h2::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 2px;
      background: #0099ff;
      border-radius: 2px;
    }
    
    .form-group {
      margin-bottom: 25px;
      position: relative;
    }
    
    .form-group label {
      font-size: 16px;
      color: #555;
      margin-bottom: 10px;
      font-weight: 500;
    }
    
    .form-group input {
      padding: 14px 14px 14px 42px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-size: 16px;
      transition: border-color 0.3s, box-shadow 0.3s;
      width: 100%;
    }
    
    .form-group input:focus {
      outline: none;
      border-color: #0099ff;
      box-shadow: 0 0 0 2px rgba(0, 153, 255, 0.15);
    }
    
    /* 精细调整图标位置 */
    .form-group i {
      position: absolute;
      left: 16px;
      top: 62%; /* 向下微调2% */
      transform: translateY(-50%);
      color: #999;
      font-size: 18px;
    }
    
    /* 单独调整密码图标位置（可能需要更向下） */
    .form-group:nth-child(2) i {
      top: 62%; /* 密码图标可能需要更向下 */
    }
    
    /* 单独调整验证码图标位置 */
    .captcha-row .form-group i {
      top: 62%; /* 验证码图标位置调整 */
    }
    
    .captcha-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 12px;
    }
    
    .captcha-row .form-group {
      flex: 1;
      margin-bottom: 0;
    }
    
    .captcha-image {
      width: 100px;
      height: 40px;
      object-fit: cover;
      border-radius: 8px;
    }
    
    .captcha-refresh {
      color: #0099ff;
      text-decoration: none;
      font-size: 14px;
      transition: color 0.3s;
      white-space: nowrap;
    }
    
    .auto-login {
      margin: 20px 0;
      font-size: 14px;
      display: flex;
      align-items: center;
    }
    
    .auto-login input {
      margin-right: 6px;
      transform: scale(1.1);
    }
    
    .btn-login {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, #00a1ff 0%, #0075c0 100%);
      border: none;
      color: white;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      transition: all 0.3s;
      box-shadow: 0 3px 10px rgba(0, 145, 255, 0.25);
    }
    
    .btn-login:hover {
      background: linear-gradient(135deg, #0095e6 0%, #0069a8 100%);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 145, 255, 0.3);
    }
    
    .btn-login i {
      margin-right: 6px;
    }
    
    .forget-pwd {
      text-align: center;
      margin-top: 25px;
    }
    
    .forget-pwd a {
      text-decoration: none;
      color: #0099ff;
      font-size: 14px;
      font-weight: 500;
      transition: color 0.3s;
    }
    
    @media (max-width: 480px) {
      .login-box {
        padding: 30px 25px;
      }
      
      .login-box h2 {
        font-size: 24px;
      }
      
      .form-group input {
        padding: 12px 12px 12px 38px;
        font-size: 15px;
      }
      
      .form-group label {
        font-size: 15px;
      }
      
      .captcha-image {
        width: 90px;
        height: 38px;
      }
      
      .captcha-refresh {
        font-size: 13px;
      }
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <div class="login-box">
    <h2>熙心体检系统 登录</h2>
    <div class="form-group">
      <label for="username">用户名</label>
      <i class="fas fa-user"></i>
      <input type="text" id="username" placeholder="请输入用户名">
    </div>
    <div class="form-group">
      <label for="password">密码</label>
      <i class="fas fa-lock"></i>
      <input type="password" id="password" placeholder="请输入密码">
    </div>
    <div class="captcha-row">
      <div class="form-group">
        <label for="captcha">验证码</label>
        <i class="fas fa-key"></i>
        <input type="text" id="captcha" placeholder="请输入验证码">
      </div>
     <img src="8231.png"/>
      <a href="javascript:;" class="captcha-refresh">
        <i class="fas fa-redo-alt"></i> 换一张
      </a>
    </div>
    <div class="auto-login">
      <input type="checkbox" id="autoLogin">
      <label for="autoLogin">下次自动登录</label>
    </div>
    <button class="btn-login" id="loginBtn">
      <i class="fas fa-sign-in-alt"></i> 登录系统
    </button>
    <div class="forget-pwd">
      <a href="javascript:;">
        <i class="fas fa-question-circle"></i> 忘记密码?
      </a>
    </div>
  </div>
  <script>
    document.querySelector('.captcha-refresh').addEventListener('click', function(e) {
      e.preventDefault();
      const captchaImg = document.querySelector('.captcha-image');
      captchaImg.src = `8231.png?timestamp=${new Date().getTime()}`;
    });
    
    document.getElementById('loginBtn').addEventListener('click', function() {
      const username = document.getElementById('username').value.trim();
      const password = document.getElementById('password').value.trim();
      const captcha = document.getElementById('captcha').value.trim();
      
      if (!username || !password || !captcha) {
        alert('请填写完整的登录信息');
        return;
      }
      
      alert('登录成功！正在跳转...');
      window.location.href = 'welcome.html';
    });
  </script>
</body>
</html>